<template >
    <div>
        <template v-for="(v,i) in (data||[])">
            <el-submenu :index="getPrefix(v.name)" v-if="v.children && v.children.length">
                <template slot="title">
                    <i v-if="v.icon" :class="getIcon(v)"></i>
                    <span>{{v.text}}</span>
                </template>
                <menu-item :data="v.children" :prefix="getPrefix(v.name)"></menu-item>
            </el-submenu>
            <el-menu-item :index="getPrefix(v.name)" v-else @click="go(v)">{{v.text}}</el-menu-item>
        </template>
    </div>
</template>

<script>
    export default {
        props: ["data", "prefix"],
        name: "MenuItem",
        methods: {
            getPrefix(i) {
                if (this.prefix) {
                    return `${this.prefix}.${i}`;
                } else {
                    return `${i}`;
                }
            },
            getIcon(v){
                var ret = {};
                ret[v.icon] = true;
                return ret;
            },
            go(v){
                var item = this;
                var limit = 100;
                while(limit-- > 0){
                    if(item.$options.name == 'Index'){
                        item.go({
                            name: (v.name),
                            url: v.href,
                            title: v.text
                        });
                        break;
                    }
                    item = item.$parent;
                }
                // console.log("child click", url)
                // console.log(this.$parent.$options.name);
                // this.$emit("menuclick", url);
            }
        }
    }
</script>

<style scoped>

</style>